// 实现这个项目的构建任务

/**
 * Grunt的入口文件
 * 用于定义一些需要 Grunt 自动执行的任务
 * 需要导出一个函数
 * 此函数接收一个grunt的形参，内部提供一些创建任务时可以用到的api
 * 写好内部的内容后，在终端中输入 yarn grunt <name>    //<name>指的是执行任务的名字
 * 绝大多数情况下grunt的插件命名是grunt-xxx,清除插件的名字就是clean
 * 清除文件就是yarn grunt clean,别的也一样
 * 
 * 问题: 1. 不知道是不是ejs的模板数据没对上,ejs数据好像没渲染出来,
 *       2. style的样式也没有加载出来,其余的应该都是可以的了
 */


const sass = require('sass')
const loadGruntTask = require('load-grunt-tasks')

const browserSync = require("browser-sync")
const bs = browserSync.create()

module.exports = grunt => {
    //配置多目标
    grunt.initConfig({
        clean: {
            temp: 'dist/**'
        },
        sass: {
            options: {
                sourceMap: true, //生成sourceMap文件
                implementation: sass  //指定grunt-sass中使用哪个模块进行编译
            },
            main: {
                files: { //指定输出输入路径, 左边输出,右边输入
                    'dist/css/main.css': "src/assets/styles/*.scss"
                }
            }
        },
        babel: {
            options: {
              sourceMap: true,
              presets: ['@babel/preset-env']     //根据最新的es特性最转换
            },
            main: {
                files: {
                    'dist/js/app.js':  "src/assets/scripts/main.js"
                }
            }
        },
        web_swig: {
            options: {
                swigOptions: {
                    //缓存设置为false
                    cache: false
                },
                getData: function (tpl) {
                    //模板文件的数据
                    return  {
                        menus: [
                          {
                            name: 'Home',
                            icon: 'aperture',
                            link: 'index.html'
                          },
                          {
                            name: 'Features',
                            link: 'features.html'
                          },
                          {
                            name: 'About',
                            link: 'about.html'
                          },
                          {
                            name: 'Contact',
                            link: '#',
                            children: [
                              {
                                name: 'Twitter',
                                link: 'https://twitter.com/w_zce'
                              },
                              {
                                name: 'About',
                                link: 'https://weibo.com/zceme'
                              },
                              {
                                name: 'divider'
                              },
                              {
                                name: 'About',
                                link: 'https://github.com/zce'
                              }
                            ]
                          }
                        ],
                        pkg: require('./package.json'),
                        date: new Date()
                      }
                }
            },
            main: {
                expand: true,
                cwd: 'src/',//源文件文件夹
                src: "**/*.html",//后缀名匹配
                dest: "dist/"//目标文件夹
            },
        },
        watch: {  
            js: {  //添加js目标,监听js文件的变化
                files: ['src/assets/scripts/*.js'], //设为数组,不需要输出文件,监视原文件
                tasks: ['babel'] //文件发生改变时,需要执行的任务,这里是执行babel任务
            },
            css: {
                files: ['src/assets/styles/*.scss'],
                tasks: ['sass']
            },
            html: {
                files: ['src/*.html'],
                tasks: ['web_swig', 'bs-reload']
            }
        },



    })
    //加载插件
    // grunt.loadNpmTasks('grunt-contrib-clean')
    // grunt.loadNpmTasks('grunt-sass')
    /** 不需要像上面那样一个个加载,可以统一加载 */
    loadGruntTask(grunt)  //自动加载grunt中的任务
    grunt.registerTask('bs-reload', function () {
        bs.reload()
    })
    grunt.registerTask('bs', function () {
        const done = this.async()
        bs.init({
            notify: false,  //取消右侧的提示
            port: 8080,  
            open: true, //取消自动打开浏览器
            /** 另外一种写法,文件更新后,不写files,在每个文件都加入bs.reload,效果相同 */
            files: 'dist/**',  //指定下的文件修改自动刷新页面
            server: {
              baseDir: ['dist', 'src', 'public'], //指定网站的根目录
              routes: {        //可以指定到同一个目录下去
                '/node_modules': 'node_modules'  //将'node_modules'开头的文件指到项目下的node_modules去
              }
            }
          })
    })
    grunt.registerTask('serve', ['clean', 'sass', 'babel', 'bs'])

}
 